<template>
  <view class="pages">
    <!-- 标题栏  start-->
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">全部明细</block>
      <block slot="right">
        <image :src="imgBaseUrl + 'wallet/calendar.png'" class="width-33 height-32" @click="showCalendar" />
      </block>
    </fu-custom>
    <!-- 标题栏 end -->
    <view class="bg-white flex nav-tab" :style="{'top': CustomBar+'px'}">
      <view v-for="(item, index) in navList" :key="index" class="flex-sub text-center padding-tb-25 fu-fs32 text-666" :class="{ 'text-theme text-bold': tabCurrentIndex === index }" @click="tabClick(index)">
        {{ item.text || '' }}
        <view class="active-line"></view>
      </view>
    </view>
    <!-- 返佣明细 start -->
    <view class="margin-top-sm margin-lr-sm">
      <block v-for="(item,index) in listData" :key="index">
        <rebate-item :item="item"></rebate-item>
      </block>
    </view>
    <!-- 返佣明细 end -->
    <!-- 日历弹框 start -->
    <fu-popup v-model="isCalendar" mode="center" :mask-close-able="true" @close="closePopup">
      <view class="bg-white radius-16 width-640 padding-lr-sm">
        <fu-calendar @change="change" :active-bg-color="themeColor" :range-bg-color="themeBgOpacityColor" :future="true" start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="start_data" :end-time="end_data"></fu-calendar>
      </view>
    </fu-popup>
    <!-- 日历弹框 end -->
    <!-- 分页组件 start -->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 分页组件 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  import rebateItem from '../components/rebate-item/rebate-item.vue';
  export default {
    mixins: [pagingList],
    components: {
      rebateItem
    },
    data() {
      return {
        minixPagingListsApi: global.apiUrls.postDistributionOrder, //明细请求地址
        pageingListApiMethod: "post", //请求方法
        // TODO: 接口未对接 对接后将false改为true
        allowOnloadGetList: true, // 是否允许页面onload生命周期进入后立马执行getlist
        tabCurrentIndex: 0, //顶部导航 选择的第几个
        isCalendar:false,//日历弹窗
        start_data: '', //开始日期
        end_data: '', //结束日期
        type: 'all', // 当前选中状态 0：全部 1：未结算 2：已结算
        navList: [
          {
            text: '全部',
            type: 'all'
          },
          {
            text: '待结算',
            type: 'paid'
          },
          {
            text: '已结算',
            type: 'finish'
          },
        ], // 状态切换列表
      }
    },
    onLoad() {
    },
    methods: {
      /**
       * @description  显示日历
       */
      showCalendar() {
        this.isCalendar = true;
      },
      /**
       * @description  隐藏日历
       */
      closePopup() {
        this.isCalendar = false;
      },
      /**
       * @description  获取列表
       * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
       */
      change(value) {
        console.log(value)
        if (value.isInit) return;
        this.start_data = value.start;
        this.end_data = value.end;
        setTimeout(() =>{
          this.isCalendar = false;
        },800)
        this.pagingListToggle();
      },
      // ok
      tabClick(index) {
        this.tabCurrentIndex = index;
        this.type = this.navList[index].type;
        this.pagingListToggle();
      },
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        return {
          pagesize: 10,
          order_status: this.type,
          start_time: this.start_data,
          end_time: this.end_data,
          change_type: 1
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    background: #F6F7F9;
  }
</style>
